<template>
  <div class="login" style="background-image: linear-gradient(to top, #f85959 0%, #ffc773 100%);">
    <!-- 头部信息展示区 -->
    <div class="header">
      <div class="title">用户注册</div>
    </div>
    <!-- 登录区域 -->
    <div class="loginArea">
      <div class="loginForm">
        <van-form ref="form" @submit="onSubmit">
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
            size="large"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            size="large"
          />
          <van-field
            v-model="confirmPwd"
            type="password"
            name="确认密码"
            label="确认密码"
            placeholder="确认密码"
            :rules="confirmRule"
            size="large"
          />
          <van-field
            v-model="mobile"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            :rules="mobileRule"
            size="large"
          />
          <van-field
            v-model="email"
            name="电子邮箱"
            label="电子邮箱"
            placeholder="电子邮箱"
            :rules="emailRule"
            size="large"
          />
          <div style="margin: 16px">
            <van-button
              color="linear-gradient(to top, #f85959 0%, #ffc773 100%)"
              round
              block
              type="info"
              native-type="submit"
            >注册</van-button>
          </div>
          <div class="signUp">
            <span @click="toLogin">已有账号，去登录</span>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
// 引入辅助函数
import { mapMutations, mapActions } from 'vuex'
// 异步加载  引入axios
import { post } from '@/http/axios'
import { Toast } from 'vant';

export default {
  data() {
    return {
      username: "",
      password: "",
      confirmPwd: '',
      mobile: '',
      email: '',
      confirmRule: [
        {
          required: true,
          message: '请再次输入密码'
        },
        {
          validator: val => {
            return val == this.password
          },
          message: '两次密码输入不一致'
        }
      ],
      mobileRule: [
        {
          required: true,
          message: '请输入手机号'
        },
        {
          pattern: /^1[34578]\d{9}$/,
          message: '请正确格式的手机号',
        }
      ],
      emailRule: [
        {
          required: true,
          message: '请输入电子邮箱'
        },
        {
          pattern: /^\w+@\w+(\.\w+)+$/,
          message: '请正确格式的电子邮箱',
        }
      ],
    };
  },
  methods: {
    ...mapActions('register', ['toRegister']),
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit() {
      this.$refs.form.validate().then(() => {
        // 获取注册参数
        let data = {
          username: this.username,
          password: this.password,
          mobile: this.mobile,
          email: this.email,
          customer: 1
        }
        // 调用注册请求
        this.axios.post('register', data).then(res => {
          if (res.data.meta.status == 201) {
            Toast.success(res.data.meta.msg);
            setTimeout(() => {
              this.$router.replace('/login')
            }, 1000);
          } else {
            Toast.fail(res.data.meta.msg);
          }
        }).catch(rej => {
          Toast.fail(rej.data.meta.msg);
        })
      }).catch(rej => {
        Toast.fail('提交失败');
      })
    },
    // 跳转到登录
    toLogin() {
      this.$router.push('/login')
    }
  },
};
</script>

<style scoped>
/* 整体样式 */
.login {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#5098fa, #265aca);
  overflow: hidden;
}
/* 头部样式 */
.header {
  width: 100%;
  position: absolute;
  text-align: center;
  top: 20px;
}
/* 标题样式 */
.header .title {
  font-family: 'webfont';
  font-size: 40px;
  color: white;
}
.header .title_bottom {
  color: #fff;
  font-family: 'webfont';
  font-size: 20px;
}
@font-face {
  font-family: 'webfont';
  font-display: swap;
  src: url('//at.alicdn.com/t/webfont_mtjyk0oq5ef.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/webfont_mtjyk0oq5ef.eot?#iefix')
      format('embedded-opentype'),
    /* IE6-IE8 */ url('//at.alicdn.com/t/webfont_mtjyk0oq5ef.woff2')
      format('woff2'),
    url('//at.alicdn.com/t/webfont_mtjyk0oq5ef.woff') format('woff'),
    /* chrome、firefox */ url('//at.alicdn.com/t/webfont_mtjyk0oq5ef.ttf')
      format('truetype'),
    /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url('//at.alicdn.com/t/webfont_mtjyk0oq5ef.svg#AlibabaPuHuiTiH')
      format('svg'); /* iOS 4.1- */
}
/* 中间登录输入区域 卡片样式 */
.loginArea {
  box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2);
  background-color: white;
  transition: 0.3s;
  width: 90%;
  border-radius: 5px;
  margin: 100px auto;
  /* height: 300px; */
  padding: 10px;
  padding-bottom: 20px;
}
.loginArea:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
/* 输入框整体样式 */
.loginForm {
  padding-top: 20px;
}
/* 注册样式 */
.signUp {
  color: #4e95f7;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.05em;
  cursor: pointer;
}
</style>
